import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { DownOutlined, PlusOutlined,InfoCircleOutlined } from '@ant-design/icons';
import { Input, Modal, InputNumber, Upload, Button, Icon, Select, Radio, Card, Col,message,Row,Tooltip,Typography,DatePicker,Checkbox,TimePicker,Spin} from 'antd';
import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
import { FormComponentProps } from '@ant-design/compatible/es/form';
import React, { useState, useEffect} from 'react';
import { queryRule, updateRule, addRule, removeRule,detailRule } from './service';
import styles from './style.less';
import DataLang from './components/DataLang';
import TableForm from './components/TableForm';
import { PageHeaderWrapper } from '@ant-design/pro-layout';

// 导入自定义组件1
import PreviewForm from '@/components/PreviewForm';
import * as BdHelper from '@/utils/BdHelper';
import * as DataHelper from '@/helpers/DataHelper';
import * as TsxHelper from '@/helpers/TsxHelper';
import moment from 'moment';

// 常量
const { TextArea } = Input;
const FormItem = Form.Item;

const { RangePicker } = DatePicker;

// 定义: 数据表单属性
interface DataFormProps extends FormComponentProps {
  // dataModalVisible: boolean;
  isUpdate: boolean
  dataFormValues: any
  common: any
  obj: any
}

// 数据表单
const DataForm: React.FC<DataFormProps> = (props:any) => {
  // 组件属性
  const { form, isUpdate,obj,location } = props;



  const parseData = (key:any,options:any) => {
    // console.log(options);
    var name:any = "";
    if(Array.isArray(options) && options.length>0){
      options.map(item=>{
        if(item.alias_key == key){
          name = item?.item_value;
        }
      })
    }
    return name
  }

  // 图片状态
  const [picture, setPicture] = useState<any[]>([]);
  
  const [uploadChanged, setUploadChanged] = useState<boolean>(false);
  const [pictureLogo, setPictureLogo] = useState<any[]>([]);
  const [uploadLogoChanged, setUploadLogoChanged] = useState<boolean>(false);
  const [previewModelVisible, handlePreviewModalVisible] = useState<boolean>(false);
  const [previewImg, setPreviewImg] = useState('');
  const [defaultIconPicture,setDefaultPicture] = useState<any>([]);
  const [dataLangModalVisible, handleDataModalVisible] = useState<boolean>(false);
  const [fieldTitle, setFieldTitle] = useState<any>('');
  const [definedList, setDefinedList] = useState<any>([]);
  const [detail, setDetail] = useState<any>({});
  const [permission, setPermission] = useState<any>([]);
  // common数据
  const [common, setCommon] = useState<any>({});
  // 表单数据
  const [dataFormValues, setDataFormValues] = useState<any>();
  const [showLoading, setShowLoading] = useState<boolean>(true);

  useEffect(()=>{
    detailRule(location.query.id).then(res=>{
        setCommon(res.data.common);
        if(res.code == 0){
          setDetail(res.data.detail);
          setPermission(res.data.detail.permission_decode ? res.data.detail.permission_decode : []);
          getDefinePermissionList(res.data.detail.permission_decode ? res.data.detail.permission_decode : []);
          // setDefinedList(res.data.detail.permission_decode ? res.data.detail.permission_decode[0]?.definition : [])
        }
        setShowLoading(false)
      });
  },[])

  const getTableList = (value:any[]) => {
    console.log(value)
    setDefinedList(value);
  }

  const [iconUrl, setIconUrl] = useState<any>(parseData('site_icon',dataFormValues));
  const [logoUrl, setLogoUrl] = useState<any>(parseData('site_logo',dataFormValues));
  const [packgeLangTag, setPackgeLangTag] = useState('');

  const parseDataItem = (key:any,options:any) => {
    var value:any = null;
    if(Array.isArray(options) && options.length>0){
      options.map(item=>{
        if(item.permKey == key){
          value = item.permValue;
        }
      })
    }
    return value
  }

  const [nameListLang, setnameList] = useState<any>(common?.languagesOption);

  const permissionDescList = ['content_view', 'dialog', 'post_publish', 'post_review', 'publish_post_verify','post_email_verify','post_phone_verify', 'post_prove_verify','post_limit_status',
  'post_limit_type','post_limit_period_start','post_limit_period_end','post_limit_cycle_start','post_limit_cycle_end','post_limit_rule','comment_publish',
'comment_review','publish_comment_verify','comment_email_verify','comment_phone_verify','comment_prove_verify','comment_limit_status','comment_limit_type','comment_limit_period_start',
'comment_limit_period_end','comment_limit_cycle_start','comment_limit_cycle_end','comment_limit_rule','post_editor_image','post_editor_video','post_editor_audio','post_editor_doc',
'images_max_size','videos_max_size','videos_max_time','audios_max_size','audios_max_time','docs_max_size'];

  const getDefinePermissionList = (detail:any) => {
    var arr:any = [];
    if(detail && detail.length > 0){
      detail.map((item:any,index:any) => {
        if(permissionDescList.indexOf(item.permKey) == -1){
          arr = [...arr,item];
        }
      })
    }
    console.log(arr);
    setDefinedList(arr);
  }
  


  //提交表单
  const okHandle = () => {
    form.validateFields((err:any, fieldsValue:any) => {
      if (err) return;
      console.log("submit fields", fieldsValue)
      let arrList = definedList;
      if(definedList.length>0){
        definedList.map((item:any,index:any)=>{
          arrList[index] = {
            permKey: item.permKey,
            permValue: item.permValue,
            permStatus:"",
          }
        })
      }
      var submitValue = [
        {
          "permKey": "content_view",
          "permValue": fieldsValue.content_view,
          "permStatus": "" 
        },
        {
          "permKey": "dialog",
          "permValue": fieldsValue.dialog,
          "permStatus": "" 
        },
        {
          "permKey": "post_publish",
          "permValue": fieldsValue.post_publish,
          "permStatus": "" 
        },
        {
          "permKey": "post_review",
          "permValue": fieldsValue.post_review,
          "permStatus": "" 
        },
        {
          "permKey": "publish_post_verify",
          "permValue": fieldsValue.publish_post_verify,
          "permStatus": "" 
        },
        {
          "permKey": "post_email_verify",
          "permValue": fieldsValue.publish_post_verify.indexOf("post_email_verify") > -1 ? true : false,
          "permStatus": "" 
        },
        {
          "permKey": "post_phone_verify",
          "permValue": fieldsValue.publish_post_verify.indexOf("post_phone_verify") > -1 ? true : false,
          "permStatus": "" 
        },
        {
          "permKey": "post_prove_verify",
          "permValue": fieldsValue.publish_post_verify.indexOf("post_prove_verify") > -1 ? true : false,
          "permStatus": "" 
        },
        {
          "permKey": "post_limit_status",
          "permValue": fieldsValue.post_limit_status,
          "permStatus": "" 
        },
        {
          "permKey": "post_limit_type",
          "permValue": fieldsValue.post_limit_type,
          "permStatus": "" 
        },
        {
          "permKey": "post_limit_period_start",
          "permValue": fieldsValue.post_limit_type == 1 ? moment(fieldsValue.post_limit_period[0]) : null,
          "permStatus": "" 
        },
        {
          "permKey": "post_limit_period_end",
          "permValue": fieldsValue.post_limit_type == 1 ? moment(fieldsValue.post_limit_period[1]) : null,
          "permStatus": "" 
        },
        {
          "permKey": "post_limit_cycle_start",
          "permValue": fieldsValue.post_limit_type == 2 ? moment(fieldsValue.post_limit_cycle_start) : null,
          "permStatus": "" 
        },
        {
          "permKey": "post_limit_cycle_end",
          "permValue": fieldsValue.post_limit_type == 2 ? moment(fieldsValue.post_limit_cycle_end) : null,
          "permStatus": "" 
        },
        {
          "permKey": "post_limit_rule",
          "permValue": fieldsValue.post_limit_rule,
          "permStatus": "" 
        },
        {
          "permKey": "comment_publish",
          "permValue": fieldsValue.comment_publish,
          "permStatus": "" 
        },
        {
          "permKey": "comment_review",
          "permValue": fieldsValue.comment_review,
          "permStatus": "" 
        },
        {
          "permKey": "publish_comment_verify",
          "permValue": fieldsValue.publish_comment_verify,
          "permStatus": "" 
        },
        {
          "permKey": "comment_email_verify",
          "permValue": fieldsValue.publish_comment_verify.indexOf("comment_email_verify") > -1 ? true : false,
          "permStatus": "" 
        },
        {
          "permKey": "comment_phone_verify",
          "permValue": fieldsValue.publish_comment_verify.indexOf("comment_phone_verify") > -1 ? true : false,
          "permStatus": "" 
        },
        {
          "permKey": "comment_prove_verify",
          "permValue": fieldsValue.publish_comment_verify.indexOf("comment_prove_verify") > -1 ? true : false,
          "permStatus": "" 
        },
        {
          "permKey": "comment_limit_status",
          "permValue": fieldsValue.comment_limit_status,
          "permStatus": "" 
        },
        {
          "permKey": "comment_limit_type",
          "permValue": fieldsValue.comment_limit_type,
          "permStatus": "" 
        },
        {
          "permKey": "comment_limit_period_start",
          "permValue": fieldsValue.comment_limit_type == 1 ? moment(fieldsValue.comment_limit_period[0]) : null,
          "permStatus": "" 
        },
        {
          "permKey": "comment_limit_period_end",
          "permValue": fieldsValue.comment_limit_type == 1 ? moment(fieldsValue.comment_limit_period[1]) : null,
          "permStatus": "" 
        },
        {
          "permKey": "comment_limit_cycle_start",
          "permValue": fieldsValue.comment_limit_type == 2 ? moment(fieldsValue.comment_limit_cycle_start) : null,
          "permStatus": "" 
        },
        {
          "permKey": "comment_limit_cycle_end",
          "permValue": fieldsValue.comment_limit_type == 2 ? moment(fieldsValue.comment_limit_cycle_end) : null,
          "permStatus": "" 
        },
        {
          "permKey": "comment_limit_rule",
          "permValue": fieldsValue.comment_limit_rule,
          "permStatus": "" 
        },
        {
          "permKey": "post_editor_image", //上传图片
          "permValue": fieldsValue.post_editor_image,
          "permStatus": ""
      },
      {
          "permKey": "post_editor_video", //上传视频
          "permValue": fieldsValue.post_editor_video,
          "permStatus": ""
      },
      {
          "permKey": "post_editor_audio", //上传音频
          "permValue": fieldsValue.post_editor_audio,
          "permStatus": ""
      },
      {
          "permKey": "post_editor_doc", //上传文档
          "permValue": fieldsValue.post_editor_doc,
          "permStatus": ""
      },
      {
          "permKey": "images_max_size", //上传图片，支持的最大尺寸
          "permValue": fieldsValue.images_max_size,
          "permStatus": ""
      },
      {
          "permKey": "videos_max_size", //上传视频，支持的最大尺寸
          "permValue": fieldsValue.videos_max_size,
          "permStatus": ""
      },
      {
          "permKey": "videos_max_time", //上传视频，视频支持的最大时长
          "permValue": fieldsValue.videos_max_time,
          "permStatus": ""
      },
      {
          "permKey": "audios_max_size", //上传音频，支持的最大尺寸
          "permValue": fieldsValue.audios_max_size,
          "permStatus": ""
      },
      {
          "permKey": "audios_max_time", //上传音频，音频支持的最大时长
          "permValue": fieldsValue.audios_max_time,
          "permStatus": ""
      },
      {
          "permKey": "docs_max_size", //上传文档，支持的最大尺寸
          "permValue": fieldsValue.docs_max_size,
          "permStatus": ""
      }, 
      // {
      //   "permKey": "definedList",
      //   "permValue": arrList,
      //   "permStatus": ""
      // }, 
    ]
    submitValue = [...submitValue,...arrList]
      // 如果更新成功之后，重置表单
      updateRule({id: location.query.id, permission: JSON.stringify(submitValue)}).then((res:any) => {
        console.log('handleSubmit then success is ', JSON.stringify(submitValue))
        if(res.code == 0){
          message.success('保存成功')
        }
      })

    });
  };




  // 初始化变量
  const token = BdHelper.getBdToken()

  const { Option } = Select;
  

  // 弹出框
  // @ts-ignore
  return <PageHeaderWrapper >
    <Spin spinning={showLoading}>
    <Card>
      <Card title="基础设置" bordered={false}>
        <Row>
          <Col span={14}>
            <FormItem label={'浏览权限'} labelCol={{ span: 5 }} wrapperCol={{ span: 19 }} style={{marginBottom: 15}}>
                {form.getFieldDecorator('content_view', {
                  initialValue: parseDataItem('content_view',permission),
                })(<Radio.Group buttonStyle="solid">
                <Radio value={true}>允许浏览</Radio>
                <Radio value={false}>禁止浏览</Radio>
              </Radio.Group>)}
            </FormItem>
          </Col>
          <Col offset={1} span={7}>
            <span style={{height:32,lineHeight:'32px',display:'block',marginTop:2}}></span>
          </Col>
        </Row>
        <Row>
          <Col span={14}>
            <FormItem label={'会话权限'} labelCol={{ span: 5 }} wrapperCol={{ span: 19 }} style={{marginBottom: 15}}>
                {form.getFieldDecorator('dialog', {
                  initialValue: parseDataItem('dialog',permission),
                })(<Radio.Group buttonStyle="solid">
                <Radio value={true}>允许</Radio>
                <Radio value={false}>禁用发送私信会话</Radio>
              </Radio.Group>)}
            </FormItem>
          </Col>
          <Col offset={1} span={7}>
            <span style={{height:32,lineHeight:'32px',display:'block',marginTop:2}}></span>
          </Col>
        </Row>
      </Card>

      <Card title="发表帖子设置" bordered={false}>
        <Row>
          <Col span={14}>
            <FormItem label={'发表帖子权限'} labelCol={{ span: 5 }} wrapperCol={{ span: 19 }} style={{marginBottom: 15}}>
                {form.getFieldDecorator('post_publish', {
                  initialValue: parseDataItem('post_publish',permission),
                })(<Radio.Group buttonStyle="solid">
                <Radio value={true}>允许</Radio>
                <Radio value={false}>禁止</Radio>
              </Radio.Group>)}
            </FormItem>
          </Col>
          <Col offset={1} span={7}>
            <span style={{height:32,lineHeight:'32px',display:'block',marginTop:2}}></span>
          </Col>
        </Row>
        <Row>
          <Col span={14}>
            <FormItem label={'发表帖子要求'} labelCol={{ span: 5 }} wrapperCol={{ span: 19 }} style={{marginBottom: 15}}>
                {form.getFieldDecorator('publish_post_verify', {
                  initialValue: [parseDataItem('post_email_verify',permission) ? 'post_email_verify' : null, parseDataItem('post_phone_verify',permission) ? 'post_phone_verify' : null, parseDataItem('post_prove_verify',permission) ? 'post_prove_verify' : null,],
                })(<Checkbox.Group onChange={(list)=>{console.log(list)}}>
                    <Checkbox value="post_email_verify">已绑定邮箱</Checkbox>
                    <Checkbox value="post_phone_verify">已绑定手机号</Checkbox>
                    <Checkbox value="post_prove_verify">已实名认证</Checkbox>
                </Checkbox.Group>)}
            </FormItem>
          </Col>
          <Col offset={1} span={7}>
            <span style={{height:32,lineHeight:'32px',display:'block',marginTop:2}}></span>
          </Col>
        </Row>
        <Row>
          <Col span={14}>
            <FormItem label={'发表帖子规则'} labelCol={{ span: 5 }} wrapperCol={{ span: 19 }} style={{marginBottom: 15}}>
                {form.getFieldDecorator('post_review', {
                  initialValue: parseDataItem('post_review',permission),
                })(<Radio.Group buttonStyle="solid">
                <Radio value={false}>直接通过</Radio>
                <Radio value={true}>需要审核</Radio>
              </Radio.Group>)}
            </FormItem>
          </Col>
          <Col offset={1} span={7}>
            <span style={{height:32,lineHeight:'32px',display:'block',marginTop:2}}></span>
          </Col>
        </Row>
        <Row>
          <Col span={14}>
            <FormItem label={'发表帖子特殊规则'} labelCol={{ span: 5 }} wrapperCol={{ span: 19 }} style={{marginBottom: 15}}>
                {form.getFieldDecorator('post_limit_status', {
                  initialValue: parseDataItem('post_limit_status',permission),
                })(<Radio.Group buttonStyle="solid">
                <Radio value={false}>关闭特殊规则</Radio>
                <Radio value={true}>开启特殊规则</Radio>
              </Radio.Group>)}
            </FormItem>
          </Col>
          <Col offset={1} span={7}>
            <span style={{height:32,lineHeight:'32px',display:'block',marginTop:2}}></span>
          </Col>
        </Row>
        {
        form.getFieldValue('post_limit_status') == 1 &&
        <Row justify={'start'}>
        <Col style={{display: 'flex', justifyContent: 'flex-start',}}>
          <Card title="特殊规则" type="inner"  style={{width: "62.5%"}}>
            <FormItem label={'限制类型'} labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} style={{marginBottom: 15}}>
              {form.getFieldDecorator('post_limit_type', {
                initialValue: parseDataItem('post_limit_type',permission),
              })(<Select placeholder={formatMessage({ id: 'app.base.please_select' })} size={'default'} style={{ width: '100%' }}>
                <Option value={'1'}>指定某个时间段限制</Option>
                <Option value={'2'}>指定每天的某个时间段限制</Option>
                </Select>)}
            </FormItem>
            {form.getFieldValue('post_limit_type') == '1' &&
                <FormItem label={'日期范围'} labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} style={{marginBottom: 15}}>
                  {form.getFieldDecorator('post_limit_period', {
                    initialValue: [moment(parseDataItem('post_limit_period_start',permission)), moment(parseDataItem('post_limit_period_end',permission))] || [moment(new Date(), 'YYYY-MM-DD HH:mm:ss'), moment(new Date(), 'YYYY-MM-DD HH:mm:ss')],
                  })(<RangePicker showTime  format="YYYY-MM-DD HH:mm:ss" size={'default'} style={{ width: '100%' }} >
                </RangePicker>)}
                </FormItem>
            }
            {form.getFieldValue('post_limit_type') == '2' &&
            <>
              <FormItem label={'日期范围'} labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} style={{marginBottom: 15}}>
                <FormItem style={{ width: '50%',display:'inline-block' }}>
                  {form.getFieldDecorator('post_limit_cycle_start', {
                    initialValue: moment(parseDataItem('post_limit_cycle_start',permission)) || '',
                  })(<TimePicker  size={'default'} style={{ width: '100%' }} >
                </TimePicker>)}
                </FormItem>
                <FormItem style={{ width: '50%',display:'inline-block' }}>
                  {form.getFieldDecorator('post_limit_cycle_end', {
                    initialValue: moment(parseDataItem('post_limit_cycle_end',permission)) || '',
                  })(<TimePicker  size={'default'} style={{ width: '100%' }} >
                </TimePicker>)}
                </FormItem>
              </FormItem>
            </>
            }
            <FormItem label={'限制规则'} labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} style={{marginBottom: 15}}>
              {form.getFieldDecorator('post_limit_rule', {
                initialValue: parseDataItem('post_limit_rule',permission),
              })(<Radio.Group buttonStyle="solid">
              <Radio value={2}>禁止发表</Radio>
              <Radio value={1}>可以发表，但是需要审核</Radio>
            </Radio.Group>)}
            </FormItem>
          </Card>
        </Col>
      </Row>
        }
    </Card>

    <Card title="发表评论设置" bordered={false}>
        <Row>
          <Col span={14}>
            <FormItem label={'发表评论权限'} labelCol={{ span: 5 }} wrapperCol={{ span: 19 }} style={{marginBottom: 15}}>
                {form.getFieldDecorator('comment_publish', {
                  initialValue: parseDataItem('comment_publish',permission),
                })(<Radio.Group buttonStyle="solid">
                <Radio value={true}>允许</Radio>
                <Radio value={false}>禁止</Radio>
              </Radio.Group>)}
            </FormItem>
          </Col>
          <Col offset={1} span={7}>
            <span style={{height:32,lineHeight:'32px',display:'block',marginTop:2}}></span>
          </Col>
        </Row>
        <Row>
          <Col span={14}>
            <FormItem label={'发表评论要求'} labelCol={{ span: 5 }} wrapperCol={{ span: 19 }} style={{marginBottom: 15}}>
                {form.getFieldDecorator('publish_comment_verify', {
                  initialValue: [parseDataItem('comment_email_verify',permission) ? 'comment_email_verify' : null, parseDataItem('comment_phone_verify',permission) ? 'comment_phone_verify' : null, parseDataItem('comment_prove_verify',permission) ? 'comment_prove_verify' : null,],
                })(<Checkbox.Group onChange={(list)=>{console.log(list)}}> 
                    <Checkbox value="comment_email_verify">已绑定邮箱</Checkbox>
                    <Checkbox value="comment_phone_verify">已绑定手机号</Checkbox>
                    <Checkbox value="comment_prove_verify">已实名认证</Checkbox>
                </Checkbox.Group>)}
            </FormItem>
          </Col>
          <Col offset={1} span={7}>
            <span style={{height:32,lineHeight:'32px',display:'block',marginTop:2}}></span>
          </Col>
        </Row>
        <Row>
          <Col span={14}>
            <FormItem label={'发表评论规则'} labelCol={{ span: 5 }} wrapperCol={{ span: 19 }} style={{marginBottom: 15}}>
                {form.getFieldDecorator('comment_review', {
                  initialValue: parseDataItem('comment_review',permission),
                })(<Radio.Group buttonStyle="solid">
                <Radio value={false}>直接通过</Radio>
                <Radio value={true}>需要审核</Radio>
              </Radio.Group>)}
            </FormItem>
          </Col>
          <Col offset={1} span={7}>
            <span style={{height:32,lineHeight:'32px',display:'block',marginTop:2}}></span>
          </Col>
        </Row>
        <Row>
          <Col span={14}>
            <FormItem label={'发表评论特殊规则'} labelCol={{ span: 5 }} wrapperCol={{ span: 19 }} style={{marginBottom: 15}}>
                {form.getFieldDecorator('comment_limit_status', {
                  initialValue: parseDataItem('comment_limit_status',permission),
                })(<Radio.Group buttonStyle="solid">
                <Radio value={false}>关闭特殊规则</Radio>
                <Radio value={true}>开启特殊规则</Radio>
              </Radio.Group>)}
            </FormItem>
          </Col>
          <Col offset={1} span={7}>
            <span style={{height:32,lineHeight:'32px',display:'block',marginTop:2}}></span>
          </Col>
        </Row>
        {
        form.getFieldValue('comment_limit_status') == 1 &&
        <Row justify={'start'}>
        <Col style={{display: 'flex', justifyContent: 'flex-start',}}>
          <Card title="特殊规则" type="inner"  style={{width: "62.5%"}}>
            <FormItem label={'限制类型'} labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} style={{marginBottom: 15}}>
              {form.getFieldDecorator('comment_limit_type', {
                initialValue: parseDataItem('comment_limit_type',permission),
              })(<Select placeholder={formatMessage({ id: 'app.base.please_select' })} size={'default'} style={{ width: '100%' }}>
                <Option value={1}>指定某个时间段限制</Option>
                <Option value={2}>指定每天的某个时间段限制</Option>
                </Select>)}
            </FormItem>
            {/* {form.getFieldValue('comment_limit_type') == '1' &&
                <FormItem label={'日期范围'} labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} style={{marginBottom: 15}}>
                  {form.getFieldDecorator('comment_limit_date', {
                    initialValue: [moment(permission?.comment?.limit?.date?.start),moment(permission?.comment?.limit?.date?.end)] || [],
                  })(<RangePicker format="YYYY-MM-DD" onChange={(value, dateString)=>{console.log(value, dateString)}} size={'default'} style={{ width: '100%' }} >
                </RangePicker>)}
                </FormItem>
            } */}
            {form.getFieldValue('comment_limit_type') == '1' &&
                <FormItem label={'日期范围'} labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} style={{marginBottom: 15}}>
                  {form.getFieldDecorator('comment_limit_period', {
                    initialValue: [moment(parseDataItem('comment_limit_period_start',permission)), moment(parseDataItem('comment_limit_period_end',permission))] || [moment(new Date(), 'YYYY-MM-DD HH:mm:ss'), moment(new Date(), 'YYYY-MM-DD HH:mm:ss')],
                  })(<RangePicker showTime  format="YYYY-MM-DD HH:mm:ss" size={'default'} style={{ width: '100%' }} >
                </RangePicker>)}
                </FormItem>
            }
            {form.getFieldValue('comment_limit_type') == '2' &&
            <>
              <FormItem label={'日期范围'} labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} style={{marginBottom: 15}}>
                <FormItem style={{ width: '50%',display:'inline-block' }}>
                  {form.getFieldDecorator('comment_limit_cycle_start', {
                    initialValue: moment(parseDataItem('comment_limit_cycle_start',permission)) || '',
                  })(<TimePicker  size={'default'} style={{ width: '100%' }} >
                </TimePicker>)}
                </FormItem>
                <FormItem style={{ width: '50%',display:'inline-block' }}>
                  {form.getFieldDecorator('comment_limit_cycle_end', {
                    initialValue: moment(parseDataItem('comment_limit_cycle_end',permission)) || '',
                  })(<TimePicker  size={'default'} style={{ width: '100%' }} >
                </TimePicker>)}
                </FormItem>
              </FormItem>
            </>
            }
            <FormItem label={'限制规则'} labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} style={{marginBottom: 15}}>
              {form.getFieldDecorator('comment_limit_rule', {
                initialValue: parseDataItem('comment_limit_rule',permission),
              })(<Radio.Group buttonStyle="solid">
              <Radio value={2}>禁止发表</Radio>
              <Radio value={1}>可以发表，但是需要审核</Radio>
            </Radio.Group>)}
            </FormItem>
          </Card>
        </Col>
      </Row>
        }
    </Card>

    <Card title="上传设置" bordered={false}>
      <Row>
        <Col span={14}>
          <FormItem label={'上传图片'} labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} style={{marginBottom: 15}}>
              {form.getFieldDecorator('post_editor_image', {
                initialValue: parseDataItem('post_editor_image',permission),
              })(<Radio.Group buttonStyle="solid">
                <Radio value={true}>允许</Radio>
                <Radio value={false}>禁止</Radio>
            </Radio.Group>)}
          </FormItem>
        </Col>
        <Col offset={1} span={7}>
          <span style={{height:32,lineHeight:'32px',display:'block',marginTop:2}}></span>
        </Col>
      </Row>
      {form.getFieldValue('post_editor_image') == true &&
      <Row>
        <Col span={14}>
          <FormItem label={'上传图片设置'} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} style={{marginBottom: 15}}>
              {form.getFieldDecorator('images_max_size', {
                initialValue: parseDataItem('images_max_size',permission),
                rules: [{ pattern: /^[0-9]*$/, message: '请输入合理的大小' }],
              })(<Input placeholder="上传图片最大尺寸" addonAfter="MB"  style={{width:'100%'}}/>)}
          </FormItem>
        </Col>
        <Col offset={1} span={7}>
          <span style={{height:32,lineHeight:'32px',display:'block',marginTop:2}}></span>
        </Col>
      </Row>
      }
      <Row>
        <Col span={14}>
          <FormItem label={'上传视频'} labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} style={{marginBottom: 15}}>
              {form.getFieldDecorator('post_editor_video', {
                initialValue: parseDataItem('post_editor_video',permission) || true,
              })(<Radio.Group buttonStyle="solid">
                <Radio value={true}>允许</Radio>
                <Radio value={false}>禁止</Radio>
            </Radio.Group>)}
          </FormItem>
        </Col>
        <Col offset={1} span={7}>
          <span style={{height:32,lineHeight:'32px',display:'block',marginTop:2}}></span>
        </Col>
      </Row>
      {form.getFieldValue('post_editor_video') == true &&
      <Row>
        <Col span={14}>
          <FormItem label={'上传视频设置'} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} style={{marginBottom: 15}}>
            <FormItem style={{ width: '50%',display:'inline-block' }}>
              {form.getFieldDecorator('videos_max_size', {
                initialValue: parseDataItem('videos_max_size',permission),
              })(<Input placeholder="上传视频最大尺寸" addonAfter="MB"  style={{width:'100%'}}/>)}
            </FormItem>
            <FormItem style={{ width: '50%',display:'inline-block' }}>
              {form.getFieldDecorator('videos_max_time', {
                initialValue: parseDataItem('videos_max_time',permission),
              })(<Input placeholder="上传视频最大时长" addonAfter="秒"  style={{width:'100%'}}/>)}
            </FormItem>
          </FormItem>
        </Col>
        <Col offset={1} span={7}>
          <span style={{height:32,lineHeight:'32px',display:'block',marginTop:2}}></span>
        </Col>
      </Row>
      }
      <Row>
        <Col span={14}>
          <FormItem label={'上传音频'} labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} style={{marginBottom: 15}}>
              {form.getFieldDecorator('post_editor_audio', {
                initialValue: parseDataItem('post_editor_audio',permission) || true,
              })(<Radio.Group buttonStyle="solid">
                <Radio value={true}>允许</Radio>
                <Radio value={false}>禁止</Radio>
            </Radio.Group>)}
          </FormItem>
        </Col>
        <Col offset={1} span={7}>
          <span style={{height:32,lineHeight:'32px',display:'block',marginTop:2}}></span>
        </Col>
      </Row>
      {form.getFieldValue('post_editor_audio') == true &&
      <Row>
        <Col span={14}>
          <FormItem label={'上传音频设置'} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} style={{marginBottom: 15}}>
            <FormItem style={{ width: '50%',display:'inline-block' }}>
              {form.getFieldDecorator('audios_max_size', {
                initialValue: parseDataItem('audios_max_size',permission),
              })(<Input placeholder="上传音频最大尺寸" addonAfter="MB"  style={{width:'100%'}}/>)}
            </FormItem>
            <FormItem style={{ width: '50%',display:'inline-block' }}>
              {form.getFieldDecorator('audios_max_time', {
                initialValue: parseDataItem('audios_max_time',permission),
              })(<Input placeholder="上传音频最大时长" addonAfter="秒"  style={{width:'100%'}}/>)}
            </FormItem>
          </FormItem>
        </Col>
        <Col offset={1} span={7}>
          <span style={{height:32,lineHeight:'32px',display:'block',marginTop:2}}></span>
        </Col>
      </Row>
      }
      <Row>
        <Col span={14}>
          <FormItem label={'上传文档'} labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} style={{marginBottom: 15}}>
              {form.getFieldDecorator('post_editor_doc', {
                initialValue: parseDataItem('post_editor_doc',permission) || true,
              })(<Radio.Group buttonStyle="solid">
                <Radio value={true}>允许</Radio>
                <Radio value={false}>禁止</Radio>
            </Radio.Group>)}
          </FormItem>
        </Col>
        <Col offset={1} span={7}>
          <span style={{height:32,lineHeight:'32px',display:'block',marginTop:2}}></span>
        </Col>
      </Row>
      {form.getFieldValue('post_editor_doc') == true &&
      <Row>
        <Col span={14}>
          <FormItem label={'上传文档设置'} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} style={{marginBottom: 15}}>
              {form.getFieldDecorator('docs_max_size', {
                initialValue: parseDataItem('docs_max_size',permission),
                rules: [{ pattern: /^[0-9]*$/, message: '请输入合理的大小' }],
              })(<Input placeholder="上传文档最大尺寸" addonAfter="MB"  style={{width:'100%'}}/>)}
          </FormItem>
        </Col>
        <Col offset={1} span={7}>
          <span style={{height:32,lineHeight:'32px',display:'block',marginTop:2}}></span>
        </Col>
      </Row>
      }
    </Card>

    <Card title="自定义设置" bordered={false}>
      <Row>
        <Col span={24}>
          <FormItem label={''}  wrapperCol={{ span: 24 }} style={{marginBottom: 15}}>
              {form.getFieldDecorator('definedList', {
                initialValue: definedList || [],
              })(<TableForm okHandle={(value)=>getTableList(value)} langTag={packgeLangTag}/>)}
          </FormItem>
        </Col>
      </Row>
    </Card>


    <Col span={24}>
      <div style={{display: 'flex',justifyContent:'center',marginTop:20,}}>
        <Button type="primary" style={{marginLeft:30}} onClick={okHandle} >保存</Button>
      </div>
    </Col>
    {/* <DataLang
        dataModalVisible={dataLangModalVisible}
        isUpdate={isUpdate}
        dataFormValues={dataFormValues}
        common={common || {}}
        // name={modalName}
        nameList={nameListLang}
        title={fieldTitle}
        onSubmit={handleSubmitDataForm}
        onCancel={() => handleDataModalVisible(false)}
    /> */}
    </Card>
    </Spin>
  </PageHeaderWrapper>;
};

export default Form.create<DataFormProps>()(DataForm);
